<template>
	<view v-if="pageShow">
		<view class="" style="padding-bottom: 100rpx;">
			<!-- 轮播图 -->
			<view class="dingwei">
				<u-swiper :list="dataAll.images_text" circular height="290px" radius="0" :autoplay="false"></u-swiper>
				<!-- <view class="bofang"></view> -->
				<view class="flexleft icowz">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share">
						<u-icon name="share-square" size="26" color="#f5f5f5"></u-icon>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-icon name="share-square" size="26" color="#f5f5f5" @click="sharePoster()"></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<!-- 赛事名称-->
			<view class="mainpadding ffffff">
				<view class="flexleft">
					<!-- 1=未开始,2=报名中,3=待开赛,4=已开赛,5=赛事结束 -->
					<view class="xiaolhbtn margin_right1" v-if="dataAll.ss_status==1">未开始</view>
					<view class="xiaocbtn margin_right1" v-if="dataAll.ss_status==2">报名中</view>
					<view class="xiaolabtn margin_right1" v-if="dataAll.ss_status==3">待开赛</view>
					<view class="xiaojubtn margin_right1" v-if="dataAll.ss_status==4">已开赛</view>
					<view class="xiaohbtn margin_right1" v-if="dataAll.ss_status==5">赛事结束</view>
					<view class="sanshier xiaohei fonweight">{{dataAll.name}}</view>
				</view>
				<!-- <view class="margin_top1" @click="tzckxq">
					<view class="yhxk xiaohui ershiba nofonweight ">{{dataAll.ss_bq_ids_text}}</view>
				</view> -->
				<view class="margin_top1">
					<view class="yhxk xiaohui ershiba nofonweight ">{{dataAll.ss_bq_ids_text}}</view>
				</view>
			</view>
			<!-- 信息内容 -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexleft xiahuaxian">
					<view class="zixikd titletext xiaohei nofonweight">主办方/组织人</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.zbfzzr}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">报名开始时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bm_starttime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">报名结束时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bm_endtime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛开始时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bs_starttime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛结束时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bs_endtime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛地址</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.cityinfo}}{{dataAll.address}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛费用</view>
					<view class=" ershiba xiaolv nofonweight">￥{{dataAll.price}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">比赛类别</view>
					<view class="flexleft">
						<view class="hxhuibtn margin_right2" v-if="dataAll.type==1">个人赛</view>
						<view class="hxhuibtn margin_right2" v-if="dataAll.type==2">团体赛</view>
					</view>
				</view>
				<view class="flexleft xiahuaxian margin_top" @click="cktbm">
					<view class="zixikd titletext xiaohei nofonweight">已报名</view>
					<view class="flexbetween" style="width: 68%;">
						<view class="flexleft">
							<view class=" ershiba xiaohui nofonweight margin_right1">
								{{dataAll.bm_join_num}}/{{dataAll.join_num}}
							</view>
							<template v-if="bmlist.length">
								<view class="touxia margin_right1" v-for="item in bmlist" :key="item.id">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class=" ershiba xiaohui nofonweight margin_right1" v-if="bmlist.length>5">...
								</view>
							</template>
						</view>
						<template v-if="bmlist.length">
							<u-icon name="arrow-right"></u-icon>
						</template>
					</view>
				</view>
				<view class="flexbetween xiahuaxian margin_top" @click="tzckgg">
					<view class=" titletext xiaohei nofonweight zixikd">比赛公告</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flexbetween xiahuaxian margin_top" @click="tzsaisz">
					<view class=" titletext xiaohei nofonweight">赛事赞助单位</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="xiahuaxian margin_top">
					<view class=" titletext xiaohei nofonweight">赛事说明</view>
					<view class=" titletext xiaohui nofonweight margin_top1">
						{{dataAll.sssm}}
					</view>
				</view>
				<view class="xiahuaxian margin_top">
					<view class=" titletext xiaohei nofonweight">赛事章程</view>
					<view class=" titletext xiaohui nofonweight margin_top1">
						{{dataAll.sszc}}
					</view>
				</view>
				<view class="margin_top" v-if="ssjjList.length">
					<view class="flexbetween" @click="jumpurl('/pages_mypage/saishijj?id=',listid)">
						<view class=" titletext xiaohei nofonweight">赛事锦集</view>
						<view class="flexright">
							<view class=" titletext xiaohei nofonweight" style="color: #1ba95b;">查看更多</view>
							<u-icon name="arrow-right" color="#1ba95b"></u-icon>
						</view>
					</view>
					<view class="" v-for="item in ssjjList" :key="item.id">
						<view class=" titletext xiaohui nofonweight margin_top">{{item.des}}</view>
						<view class="flexleft flex_wrap">
							<view class="sanshis flexcenter margin_top2" v-for="(ite,inde) in item.images_text"
								:key="inde">
								<view class="jiaolt">
									<image :src="ite" mode="" @click="lbtpriview(inde,item.images_text)"></image>
								</view>
							</view>
						</view>
						<view class="margin_top">
							<video :src="item.video_text" object-fit="cover" class="cgtpiam"></video>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding ffffff" v-if="dataAll.ss_status==2">
			<view class=" flexbetween">
				<view class="xiaohong ershiba fonweight">￥{{dataAll.price}}</view>
				<view class="xiaobtnty" @click="tzsabm" v-if="dataAll.is_bm==0">点击报名</view>
				<view class="xiaobtnty" v-if="dataAll.is_bm==1">已报名</view>
			</view>
		</view>
		<zhangyu-qrcode-poster ref="poster" :title="dataAll.name" :subTitle="dataAll.cityinfo+dataAll.address" :headerImg="dataAll.image_text"
			price=""></zhangyu-qrcode-poster>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				show: false,
				fxshow: false,
				listid: "",
				dataAll: {},
				userInfo: {},
				pageShow: false,
				bmlist: [],
				ssjjList: [],
				ewmimg:""
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
			}
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
			}
			console.log(options,"接收的参数");
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); 
				}
				console.log(theRequest,"二维码接收的参数");
				this.listid = options.id ? options.id : (theRequest.id ? theRequest.id :
					0);
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
			}
			// #endif
			
			this.getbmlist()
			this.getjj()
			// #ifdef APP-PLUS
			this.getewm()
			// #endif
		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.userinfomsg()
			}
			this.getDetail()
		},

		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			let _this = this
			return {
				title: this.dataAll.name,
				path: "pages_saishi/saishixq?id=" + this.listid + "&rec_user_id=" + uni.getStorageSync("user_id"),
			}
		},
		// #endif
		methods: {
			getewm() {
				httpRequest.request("/api/user/getCodeImage", 'GET', {
					type_id: this.listid,
					type: 3 //1=场地,2=课程,3=赛事,4=活动,5=商城
				}, false, false, true).then(res => {
					this.ewmimg = res.data.code_image
				})
			},
			sharePoster() {
				//获取带参数二维码
				this.$refs.poster.showCanvas(this.ewmimg)
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			getbmlist() {
				httpRequest.request('/api/sscl/ssBmIndex', 'GET', {
					ss_id: this.listid,
					page: 1,
					limit: 5
				}, false, false, true).then(res => {
					this.bmlist = res.data.data
				})
			},
			getjj() {
				httpRequest.request('/api/sscl/ssJjIndex', 'GET', {
					id: this.listid,
					page: 1,
					limit: 1
				}, false, false, true).then(res => {
					this.ssjjList = res.data.data
				})
			},
			getDetail() {
				httpRequest.request('/api/sscl/ssDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.list1 = res.data.images_text
					// this.list1.unshift(res.data.ssgg_video_text)
					// this.list1.unshift(res.data.sszzdw_video_text)
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			// 跳转赛事赞助
			tzsaisz() {
				uni.navigateTo({
					url: '/pages_saishi/saishixqzanzhu?id=' + this.listid
				})
			},
			// 跳转查看公告
			tzckgg() {
				uni.navigateTo({
					url: '/pages_saishi/saishixqgongg?id=' + this.listid
				})
			},
			// 跳转查看已报名
			cktbm() {
				if (this.bmlist.length == 0) {
					return false
				}
				uni.navigateTo({
					url: '/pages_saishi/yibaoming?type=1&id=' + this.listid
				})
			},
			//跳转查看赛事详情
			tzckxq() {
				uni.navigateTo({
					url: '/pages_saishi/saishixqzdxq?id=' + this.listid
				})
			},
			// 跳转赛事报名
			tzsabm() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				let smrzstatus = this.returnrztext(this.userInfo.usersmrz)
				if(smrzstatus=="未认证"){
					httpRequest.toast("请先实名认证")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shengfenzrz'
						})
					},1000)
					return false
				}
				if(smrzstatus=="待审核"){
					httpRequest.toast("实名认证审核中，暂时无法参加当前比赛")
					return false
				}
				if(smrzstatus=="认证失败"){
					httpRequest.toast("实名认证失败，请重新提交审核后再重新报名")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shenhe'
						})
					},1000)
					return false
				}
				// dataAll.type:1个人赛，2团队赛
				// dataAll.ss_type:1主办方发布的比赛，2俱乐部发布的比赛
				// userInfo.type:1主办方，2俱乐部，3团队
				// if (this.dataAll.type == 2 && this.userInfo.userzbfapply.status == 1) {
				// 	httpRequest.toast("您的合作申请正在审核中，暂时无法参加当前比赛")
				// 	return false
				// }
				// if (this.dataAll.type == 2 && this.userInfo.userzbfapply.status == 3) {
				// 	httpRequest.toast("您的合作申请正在已被拒绝，无法参加当前比赛")
				// 	return false
				// }
				// if (this.dataAll.type == 2 && this.dataAll.ss_type == 1 && this.userInfo.userzbfapply.type != 2) {
				// 	httpRequest.toast("只有俱乐部可以参加当前比赛")
				// 	return false
				// }
				// if (this.dataAll.type == 2 && this.dataAll.ss_type == 2 && this.userInfo.userzbfapply.type != 3) {
				// 	httpRequest.toast("只有团队可以参加当前比赛")
				// 	return false
				// }
				uni.navigateTo({
					url: '/pages_saishi/saishibm?id=' + this.listid
				})
			},
			returnrztext(data){
				if(!data){
					return "未认证"
				}
				// 实名认证状态:1=待审核,2=认证成功,3=认证失败
				if(data.smrz_status==1){
					return "待审核"
				}else if(data.smrz_status==2){
					return "认证成功"
				}else if(data.smrz_status==3){
					return "认证失败"
				}
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F9F9F9;
	}

	.zixikd {
		width: 220rpx;
	}

	.cgtpiam {
		height: 360rpx;
		width: 100%;
		border-radius: 16rpx;
	}

	.touxia {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.hxhuibtn {
		width: 100rpx;
		height: 40rpx;
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>